<template>
         <div class="pilot">
           <ul>
         
              <li>
                <router-link to="/" style="margin-right: 16px;">首页</router-link> 
              </li>

            <li>
               <a href="javascript:;" @click="gl =!gl">管理
                <img src="@/assets/icon/chevron-down.svg" alt="箭头" style="float: right;transform:scale(0.8) ;margin-top: 4px; opacity: 0.6;" v-show="gl ===true">
                <img src="@/assets/icon/chevron-up.svg" alt="箭头" style="float: right;transform:scale(0.8) ;margin-top: 4px;opacity: 0.6;" v-show="gl ===false">
               </a>

               <div class="content" v-show="gl ===false">
                 <li><router-link :to="{name:'内容管理'}" >内容管理</router-link></li>
                 <li><router-link :to="{name:'评论管理'}">评论管理</router-link></li>      
               </div> 

            </li>

            <li>
               <a href="javascript:;" @click="data =!data">数据
                <img src="@/assets/icon/chevron-down.svg" alt="箭头" style="float: right;transform:scale(0.8) ;margin-top: 4px;opacity: 0.6;" v-show="data ===true">
                <img src="@/assets/icon/chevron-up.svg" alt="箭头" style="float: right;transform:scale(0.8) ;margin-top: 4px;opacity: 0.6;" v-show="data ===false">
               </a>
              
               <div class="content" v-show="data ===false">
                 <li><a href="">作品数据</a></li>
                 <li><a href="">粉丝数据</a></li>
                 <li><a href="">一周小结</a></li>


                      
               </div> 
            </li>
           </ul> 
         
        </div>
  
</template>

<script>
export default {
     name:"Creationpilot",
     data() {
        return {
            //v-if
            gl:true,
            data:true,
            color:"" 
        }
     },
     methods: {
 
     },
 
}
</script>

<style>
 .pilot{
        position: fixed;
        width: 200px;
        height: 500px;
        /* background-color: aqua; */
        margin-left: 50px;
        margin-top: 40px;
    }
    .pilot ul {
        list-style-type: none;
    }
    .pilot ul a{
        display: block;
        text-align: center;
        text-decoration: none;
        font-size: medium;
        padding-bottom: 20px;
        color: #000;
    }
    .pilot .content{
        width: 100%;
        height: 80px;
        /* background-color: rgb(198, 21, 21); */
    }
    .content li a{
        font-size: small;
    }
    .pilot .active{
      color:#409eff;

    }




</style>